<template>
  <div class="app-container">
    <div class="h-2 w-100 d-flex">
      <!-- 1号楼 -->
      <div class="h-100 w-3 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-14">1号楼</div>
            </div>
          </div>
          <div class="item_content" id="bar_one"></div>
        </div>
      </div>
      <!-- 2号楼 -->
      <div class="h-100 w-3 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-14">2号楼</div>
            </div>
          </div>
          <div class="item_content" id="bar_two"></div>
        </div>
      </div>
      <!-- 3号楼 -->
      <div class="h-100 w-3 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-14">3号楼</div>
            </div>
          </div>
          <div class="item_content" id="bar_three"></div>
        </div>
      </div>
      <!-- 宿舍区1-3号楼负载对比 -->
      <div class="h-100 w-3 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-14">宿舍区1-3号楼负载对比</div>
            </div>
          </div>
          <div class="item_content" id="bar_four"></div>
        </div>
      </div>
    </div>
    <div class="h-4 w-100 d-flex">
      <!-- 宿舍区1号楼 -->
      <div class="h-100 w-3 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-14">宿舍区1号楼</div>
            </div>
          </div>
          <div class="item_content d-flex">
            <div class="h-100 width-10">
              <div class="height-20 w-100 d-flex-center" v-for="item in 5" :key="item">
                <div class="count font-white font-14">{{item}}</div>
              </div>
            </div>
            <div class="h-100 width-90 d-flex flex-wrap">
              <div class="height-20 width-20 d-flex-center" v-for="(item,index) in fourCardData" :key="index">
                <div class="wh_60 d-flex-center borderRadius6p" :class="dataCardBgColor[item.socketColor]">
                  <el-image class="img_size_38" :src="fourCardDataImg[index].imgUrl" fit="cover"></el-image>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 宿舍区2号楼 -->
      <div class="h-100 w-3 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-14">宿舍区2号楼</div>
            </div>
          </div>
          <div class="item_content d-flex">
            <div class="h-100 width-10">
              <div class="height-20 w-100 d-flex-center" v-for="item in 5" :key="item">
                <div class="count font-white font-14">{{item}}</div>
              </div>
            </div>
            <div class="h-100 width-90 d-flex flex-wrap">
              <div class="height-20 width-20 d-flex-center" v-for="(item,index) in fiveCardData" :key="index">
                <template v-if="(index!=14 && index!=19 && index!=24)">
                  <div class="wh_60 d-flex-center borderRadius6p" :class="dataCardBgColor[item.socketColor]">
                    <el-image class="img_size_38" :src="fourCardDataImg[index].imgUrl" fit="cover"></el-image>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 宿舍区3号楼 -->
      <div class="h-100 w-3 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-14">宿舍区3号楼</div>
            </div>
          </div>
          <div class="item_content d-flex">
            <div class="h-100 width-10">
              <div class="height-20 w-100 d-flex-center" v-for="item in 5" :key="item">
                <div class="count font-white font-14">{{item}}</div>
              </div>
            </div>
            <div class="h-100 width-90 d-flex flex-wrap">
              <div class="height-20 width-20 d-flex-center" v-for="(item,index) in sixCardData" :key="index">
                <div class="wh_60 d-flex-center borderRadius6p" :class="dataCardBgColor[item.socketColor]">
                  <el-image class="img_size_38" :src="fourCardDataImg[index].imgUrl" fit="cover"></el-image>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 宿舍区实时故障 -->
      <div class="h-100 w-3 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-14">宿舍区实时故障</div>
            </div>
          </div>
          <div class="d-flex flex-column item_content font-white font-12">
            <div v-show="deviceGz.length==0" class="w-100 h-100">
              <div class="w-100 h-100 d-flex flex-column justify-content-between">
                <div class="h-50">
                  <el-image class="w-100 h-100" :src="jlt" fit="contain"></el-image>
                </div>
                <div class="height-47">
                  <div class="h-100 w-100 border-success-top d-flex flex-column justify-content-between p-3">
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>洗衣机</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>空调</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>照明</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>应急灯</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div class="success_point"></div>
                        <div>总开关</div>
                      </div>
                      <div class="font-green">暂无数据</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="deviceGz.length>0" class="h-100 w-100">
              <div v-if="deviceGzObj.deviceName" class="height-30 mb-3 clearLastMb border-danger">
                <div class="h-2 bg_danger d-flex align-items-center justify-content-between pl-3 pr-3">
                  <div class="font-20">{{deviceGzObj.faultReason}}</div>
                  <div class="">{{deviceGzObj.faultTime}}</div>
                </div>
                <div class="h-4 w-100 mb-3 d-flex flex-column justify-content-around pl-3 pr-3 pt-1 pb-1">
                  <div class="d-flex-center-jb">
                    <div class="d-flex align-items-center">
                      <div>设备名称：</div>
                    </div>
                    <div>{{deviceGzObj.deviceName}}</div>
                  </div>
                  <div class="d-flex-center-jb">
                    <div class="d-flex align-items-center">
                      <div>设备位置：</div>
                    </div>
                    <div>{{deviceGzObj.deviceLocation}}</div>
                  </div>
                </div>
              </div>
              <div class="height-67 w-100 over-auto-y" ref="table_one">
                <div class="height-48 mb-3 clearLastMb border-danger" v-for="(item,index) in deviceGz" :key="index">
                  <div class="h-2 bg_danger d-flex align-items-center justify-content-between pl-3 pr-3">
                    <div class="font-20">{{item.faultReason}}</div>
                    <div class="">{{item.faultTime}}</div>
                  </div>
                  <div class="h-4 w-100 mb-3 d-flex flex-column justify-content-around pl-3 pr-3 pt-1 pb-1">
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div>设备名称：</div>
                      </div>
                      <div>{{item.deviceName}}</div>
                    </div>
                    <div class="d-flex-center-jb">
                      <div class="d-flex align-items-center">
                        <div>设备位置：</div>
                      </div>
                      <div>{{item.deviceLocation}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryOneListWorkingByReport,
    queryTwoListWorkingByReport,
    queryThreeListWorkingByReport,
    queryFourListWorkingByNum,
    queryFiveListWorkingByNum,
    querySixListWorkingByNum,
    querySevenListWorkingByReport,
    queryDeviceWorkingFaultList,
  } from "@/api/headmaster/operationMonitor"

  export default {
    components: {},
    data() {
      return {
        timeout: [],
        jlt: require('@/assets/img/jlt.png'),
        oneCardData: {
          xData: [],
          seriesData1: [],
          seriesData2: [],
          seriesData3: [],
        },

        twoCardData: {
          xData: [],
          seriesData1: [],
          seriesData2: [],
          seriesData3: [],
        },
        threeCardData: {
          xData: [],
          seriesData1: [],
          seriesData2: [],
        },

        fourCardData: [],
        fourCardDataImg: [
          {imgUrl: require('@/assets/img/kt_border.png')},
          {imgUrl: require('@/assets/img/d_border.png')},
          {imgUrl: require('@/assets/img/cz_border.png')},
          {imgUrl: require('@/assets/img/ysj_border.png')},
          {imgUrl: require('@/assets/img/xyj_border.png')},
          {imgUrl: require('@/assets/img/kt_border.png')},
          {imgUrl: require('@/assets/img/d_border.png')},
          {imgUrl: require('@/assets/img/cz_border.png')},
          {imgUrl: require('@/assets/img/ysj_border.png')},
          {imgUrl: require('@/assets/img/xyj_border.png')},
          {imgUrl: require('@/assets/img/kt_border.png')},
          {imgUrl: require('@/assets/img/d_border.png')},
          {imgUrl: require('@/assets/img/cz_border.png')},
          {imgUrl: require('@/assets/img/ysj_border.png')},
          {imgUrl: require('@/assets/img/xyj_border.png')},
          {imgUrl: require('@/assets/img/kt_border.png')},
          {imgUrl: require('@/assets/img/d_border.png')},
          {imgUrl: require('@/assets/img/cz_border.png')},
          {imgUrl: require('@/assets/img/ysj_border.png')},
          {imgUrl: require('@/assets/img/xyj_border.png')},
          {imgUrl: require('@/assets/img/kt_border.png')},
          {imgUrl: require('@/assets/img/d_border.png')},
          {imgUrl: require('@/assets/img/cz_border.png')},
          {imgUrl: require('@/assets/img/ysj_border.png')},
          {imgUrl: require('@/assets/img/xyj_border.png')},
        ],

        dataCardBgColor: ['item_bg_close', 'item_bg_open', 'item_bg_danger', 'item_bg_blue', 'item_bg_warning', 'bg-index-red', 'item_bg_orange', 'item_bg_warning2'],

        fiveCardData: [],
        sixCardData: [],

        sevenCardData: {
          xData: [],
          seriesData: [],
        },
        deviceGz: [],
        deviceGzObj: {},
      }
    },
    created() {

    },
    mounted() {
      this.queryOneListWorkingByReport()
      this.queryTwoListWorkingByReport()
      this.queryThreeListWorkingByReport()
      this.queryFourListWorkingByNum()
      this.queryFiveListWorkingByNum()
      this.querySixListWorkingByNum()
      this.querySevenListWorkingByReport()
      this.queryDeviceWorkingFaultList()

      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListWorkingByReport()
        _this.queryTwoListWorkingByReport()
        _this.queryThreeListWorkingByReport()
        _this.queryFourListWorkingByNum()
        _this.queryFiveListWorkingByNum()
        _this.querySixListWorkingByNum()
        _this.querySevenListWorkingByReport()
        _this.queryDeviceWorkingFaultList()
      }, 30000);

      this.infinitScroll("table_one")
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryOneListWorkingByReport() {
        queryOneListWorkingByReport().then(res => {
          let tempData = res.object

          let xData = []
          let seriesData1 = []
          let seriesData2 = []
          let seriesData3 = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)

            let arr = tempData[i].yValue.split(',')
            seriesData1.push(parseFloat(arr[0]))
            seriesData2.push(parseFloat(arr[1]))
            seriesData3.push(parseFloat(arr[2]))
          }

          this.oneCardData.xData = xData
          this.oneCardData.seriesData1 = seriesData1
          this.oneCardData.seriesData2 = seriesData2
          this.oneCardData.seriesData3 = seriesData3

          charts.barEchartOne('bar_one', this.oneCardData)
        })
      },
      queryTwoListWorkingByReport() {
        queryTwoListWorkingByReport().then(res => {
          let tempData = res.object

          let xData = []
          let seriesData1 = []
          let seriesData2 = []
          let seriesData3 = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)

            let arr = tempData[i].yValue.split(',')
            seriesData1.push(parseFloat(arr[0]))
            seriesData2.push(parseFloat(arr[1]))
            seriesData3.push(parseFloat(arr[2]))
          }

          this.twoCardData.xData = xData
          this.twoCardData.seriesData1 = seriesData1
          this.twoCardData.seriesData2 = seriesData2
          this.twoCardData.seriesData3 = seriesData3

          charts.barEchartOne('bar_two', this.twoCardData)
        })
      },
      queryThreeListWorkingByReport() {
        queryThreeListWorkingByReport().then(res => {
          let tempData = res.object

          let xData = []
          let seriesData1 = []
          let seriesData2 = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)

            let arr = tempData[i].yValue.split(',')
            seriesData1.push(parseFloat(arr[0]))
            seriesData2.push(parseFloat(arr[1]))
          }

          this.threeCardData.xData = xData
          this.threeCardData.seriesData1 = seriesData1
          this.threeCardData.seriesData2 = seriesData2

          charts.barEchartThree('bar_three', this.threeCardData)
        })
      },

      queryFourListWorkingByNum() {
        queryFourListWorkingByNum().then(res => {
          let tempData = res.object
          this.fourCardData = tempData
        })
      },
      queryFiveListWorkingByNum() {
        queryFiveListWorkingByNum().then(res => {
          let tempData = res.object
          this.fiveCardData = tempData
        })
      },
      querySixListWorkingByNum() {
        querySixListWorkingByNum().then(res => {
          let tempData = res.object
          this.sixCardData = tempData
        })
      },

      querySevenListWorkingByReport() {
        querySevenListWorkingByReport().then(res => {
          let tempData = res.object || []

          let xData = []
          let seriesData = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)
            let obj = {
              value: parseFloat(tempData[i].yValue),
              itemStyle: {
                color: i == 0 ? '#FED52F' : i == 1 ? '#1AA652' : '#26BDE8'
              }
            }
            seriesData.push(obj)
          }

          this.sevenCardData.xData = xData
          this.sevenCardData.seriesData = seriesData
          charts.barEchartTwo('bar_four', this.sevenCardData)
        })
      },
      async queryDeviceWorkingFaultList() {
        await queryDeviceWorkingFaultList().then(res => {
          let tempData = res.object || []
          if (tempData.length > 1) {
            this.deviceGzObj = tempData[0]
            this.deviceGz = tempData.slice(1, tempData.length)
          } else {
            this.deviceGz = tempData
          }
        })
      },
      infinitScroll(name) {
        const table = this.$refs[name]
        table.onmouseover = function () {
          clearInterval(t)
        }
        table.onmouseout = function () {
          start()
        }
        let t

        function start() {
          t = setInterval(() => {
            table.scrollTop += 1
            if (table.scrollHeight - (table.clientHeight + table.scrollTop) < 1) {
              table.scrollTop = 0
            }
          }, 30)
        }

        start()
      },
    }
  }
</script>
<style lang="scss" scoped>
  .height-67 {
    height: 65%;
  }

  .height-48 {
    height: 47%;
  }

  .height-33 {
    height: 33.33%;
  }

  .height-30 {
    height: 31%;
  }

  .height-20 {
    height: 20%;
  }

  .height-20 {
    height: 20%;
  }

  .width-10 {
    width: 10%;
  }

  .width-20 {
    width: 20%;
  }

  .width-90 {
    width: 90%;
  }

  .width-0 {
    width: 0%;
  }

  .count {
    width: 35px;
    height: 35px;
    line-height: 33px;
    text-align: center;
    border: 2px solid #07c160;
    border-radius: 50%;
  }

  .wh_60 {
    height: 60px;
    width: 60px;
  }

  .borderRadius6p {
    border-radius: 6px;
  }

  .item_bg_open {
    background-color: #1AA652;
  }

  .item_bg_danger {
    background-color: #df547b;
  }

  .item_bg_close {
    background-color: #7A7A7A;
  }

  .item_bg_blue {
    background: #2C637A;
  }

  .item_bg_warning {
    background: #B3A12F;
  }

  .bg-index-red {
    background: #AF1F1F;
  }


  .item_bg_orange {
    background: #b86104;;
  }


  .item_bg_warning2 {
    background: #AABD18;
  }

  .clearLastMb:last-child {
    margin-bottom: 0 !important;
  }

  .border-danger {
    background: rgba(3, 24, 29, 0.34);
    border: 1px solid #f31e1e;
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px #f31e1e inset;
  }

  .border-success-top {
    background: rgba(3, 24, 29, 0.20);
    border-radius: 4px;
    box-shadow: 0px 2px 15.5px 0px rgba(7, 193, 96, 0.83) inset;
  }

  .img_size_38 {
    width: 38px;
    height: 38px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }
</style>
